<template>
  <div class="app-container">
    <!-- 基本信息 -->
    <CompanyInfoBaseInfo
      v-if="Object.keys(companyInfo).length"
      :companyInfo="companyInfo"
      @topUp="editIntegralDailogShow = true"
    />

    <!-- tabs栏 -->
    <Tabs :tabs="tabs" :isShowNum="false" :currentKey="currentKey" @tab-click="tabClick" />

    <!-- 组件动态展示 -->
    <component
      :is="'CompanyInfo' + currentKey"
      @refreshInfo="getUserInfo()"
      @changeInvoice="doChangeInvoice"
    ></component>

    <!-- 开发票弹窗 -->
    <CompanyInfoOpenInvoice ref="openInvoice" v-model="invoiceDailogShow" />
    <!-- 积分调整弹窗 -->
    <CompanyInfoIntegralEdit v-model="editIntegralDailogShow" />

    <div class="mt-30 text-center">
      <el-button @click="back">返回</el-button>
    </div>
  </div>
</template>

<script>
import CompanyInfoBaseInfo from './components/CompanyInfoBaseInfo.vue'
import CompanyInfoIntegralEdit from './components/CompanyInfoIntegralEdit.vue'
import CompanyInfoDetailInfo from './components/CompanyInfoDetailInfo.vue'
import CompanyInfoReplenishLog from './components/CompanyInfoReplenishLog.vue'
import CompanyInfoGiveLog from './components/CompanyInfoGiveLog.vue'
import CompanyInfoInvoiceLog from './components/CompanyInfoInvoiceLog.vue'
import CompanyInfoRelevancyClient from './components/CompanyInfoRelevancyClient.vue'
import CompanyInfoOpenInvoice from './components/CompanyInfoOpenInvoice.vue'

export default {
  name: 'CompanyInfo',
  components: {
    //基本信息
    CompanyInfoBaseInfo,
    // 调整积分
    CompanyInfoIntegralEdit,
    // 企业资料
    CompanyInfoDetailInfo,
    // 充值记录
    CompanyInfoReplenishLog,
    // 赠送记录
    CompanyInfoGiveLog,
    // 开票记录
    CompanyInfoInvoiceLog,
    // 关联客户
    CompanyInfoRelevancyClient,
    // 开发票弹窗
    CompanyInfoOpenInvoice
  },
  props: {},
  data() {
    return {
      // 开发票弹窗是否显示
      invoiceDailogShow: false,
      // 调整积分弹窗是否显示
      editIntegralDailogShow: false,

      // 当前选中tabkey
      currentKey: 'DetailInfo',
      // 表格tab
      tabs: [
        {
          key: 'DetailInfo',
          label: '企业资料'
        },
        {
          key: 'ReplenishLog',
          label: '充值记录'
        },
        {
          key: 'GiveLog',
          label: '赠送记录'
        },
        {
          key: 'InvoiceLog',
          label: '开票记录'
        },
        {
          key: 'RelevancyClient',
          label: '关联客户'
        }
      ],

      // 企业主信息
      companyInfo: {}
    }
  },
  computed: {},
  watch: {},
  created() {
    console.log('this.$route.query.id', this.$route.query.id)
    // 路由是否携带切换组件显示
    if (this.$route.query.is) {
      this.currentKey = this.$route.query.is
    }

    // 获取企业主信息详情
    this.getUserInfo()
  },
  mounted() {},
  methods: {
    // 获取企业主信息详情
    async getUserInfo() {
      try {
        const { data } = await this.$http.user.company.getInfo(this.$route.query.id)
        // console.log(data)
        this.companyInfo = { ...data }
      } catch (error) {
        console.log('getUserInfo', error)
      }
    },

    // 切换
    tabClick({ key, value }) {
      this.currentKey = key
    },

    // 充值记录监听是否开票点击
    doChangeInvoice(id) {
      if (this.currentKey !== 'InvoiceLog') {
        this.currentKey = 'InvoiceLog'
      }
      // 设置id开启弹窗
      if (id) {
        this.$refs.openInvoice.id = id
        this.invoiceDailogShow = true
      }
    },

    back() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped></style>
